<!-- 横向布局 -->
<template>
  <div class="layout">
    <div :class="isHome ? 'header active-home' : 'header'">
      <video class="banner_video" width="100%" autoplay muted loop playsinline>
        <source src="@/assets/images/banner.mp4" type="video/mp4" />
      </video>
      <div class="line1">
        <div class="logo">
          <img class="logo-img" src="@/assets/images/logo.png" alt="logo" />
          <img class="logo-img1" src="@/assets/images/logo1.png" alt="logo" />
          <!-- <span class="logo-text">温岭智慧教育云平台</span> -->
        </div>

        <div class="tool">
          <div class="item">
            <img class="icon" src="@/assets/images/robort.png" />
            <text>云岭小助</text>
          </div>
          <div class="item">
            <el-icon class="icon"><QuestionFilled /></el-icon>
            <text>帮助中心</text>
          </div>
          <!-- :popper-options="{
                modifiers: [
                  {
                    name: 'offset',
                    options: {
                      offset: [-180, 0]
                    }
                  }
                ]
              }" -->
          <div class="item">
            <text v-if="!userStore.token" @click="login">{{ "请登录" }}</text>
            <el-dropdown placement="bottom-start" v-else trigger="click">
              <div class="item1">
                <img class="icon" src="@/assets/images/avtor.png" /><span style="margin-left: 10px">{{ username }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goBack"> 去工作台 </el-dropdown-item>
                  <el-dropdown-item @click="logout"> 退出登录 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div>
        <el-menu mode="horizontal" :ellipsis="false" :router="false" :default-active="activeMenu">
          <div v-for="subItem in menuList" :key="subItem.path">
            <el-menu-item :disabled="subItem.disabled" :index="subItem.path" @click="handleClickMenu(subItem)">
              <template #title>
                <span>{{ subItem.meta.title }}</span>
                <div v-if="subItem.disabled" class="badge">待上线</div>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </div>
      <div class="container">
        <div v-if="route.path === '/home/index'" class="title">智启未来，数创教育新篇章</div>
        <div v-if="route.path === '/home/index'" class="dis">
          <p>
            温岭智慧教育云平台是温岭市推进教育数字化转型的核心工程，立足《浙江省数字化改革总体方案》和《教育领域数字化改革工作方案》，围绕"教育魔方+智慧学校"总体框架，聚焦教育治理现代化、教学服务智能化、数据资产体系化建设目标，打造市域一体、上下贯通、安全高效的智慧教育新基座。
            "教育魔方+智慧学校"总体框架，聚焦教育治理现代化、教学服务智能化、数据资产体系化建设目标，打造市域一体、上下贯通、安全高效的智慧教育新基座。
          </p>
          <p>
            依托组织中枢、应用中枢和数据中枢三大核心体系，整合教育部门、学校、师生及家长多维数据资源，构建统一用户认证、智能数据分析、便捷应用接入的教育云生态。通过建设课后托管系统、学问通系统、无纸化办公系统、本地数据仓（驾驶舱）等一系列应用，全面覆盖教育管理、教学创新、家校沟通、人才培养等场景，有效支撑温岭教育决策科学化、服务个性化、治理智慧化。
          </p>
          <p>
            平台同步对接国家、省统建系统，深度融合之江汇、浙里办等主流平台，推动教育数据标准化建设与跨域流通共享，打造面向未来的智能教育体系。
          </p>
          <p>以数据赋能育人，以智慧驱动发展，温岭智慧教育云平台的落地将助力温岭教育走向更高质量、更高水平、更可持续的未来。</p>
        </div>
        <div v-if="route.path === '/application/index'" class="title">“一站式教育工具箱，让应用管理更轻松！”</div>
        <div v-if="route.path === '/application/index'" class="dis">
          <div class="title1">教育应用广场是什么？</div>
          <p>
            一个“教育版的应用商店”，专为老师、学校和学生/家长等用户打造。在这里，你可以一站式找到各种实用的教育应用，比如在线教学工具、学生成长记录、作业管理、教学资源库等，省级、市级、第三方应用全部集中展示，不用再到处找、来回切换账号。
          </p>
          <p>
            每个用户根据自己的身份，都会看到适合自己的应用，登录一次就能直接使用，大大提升了便捷性。教育应用广场也支持个性化推荐，帮你发现更适合你工作场景的好工具，是推动教育数字化、智能化的重要帮手。
          </p>
          <p>
            以"教育魔方+智慧学校"总体框架，聚焦教育治理现代化、教学服务智能化、数据资产体系化建设目标，打造市域一体、上下贯通、安全高效的智慧教育新基座。
          </p>
        </div>
      </div>
    </div>

    <Main />
    <Footer />
  </div>
</template>

<script setup lang="ts" name="layoutTransverse">
import { computed, onMounted } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
import { useRoute, useRouter } from "vue-router";
import Main from "@/layouts/components/Main/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox } from "element-plus";
import { LOGIN_URL } from "@/config";
import { ElMessage } from "element-plus";
import VideoPlayer from "../components/VideoPlayer.vue";
const title = import.meta.env.VITE_GLOB_APP_TITLE;

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const userStore = useUserStore();
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
console.log("activeMenu", activeMenu.value);
console.log("route", route);
const needShow = ["/home/index", "/application/index"];
const isHome = computed(() => {
  return needShow.includes(route.path);
});
const username = computed(() => userStore.userInfo.username);
// onMounted(() => {
//   // 纯 template 模式下，通过 data-setup 属性已实现基础功能
//   // 如需额外控制，可在此初始化
//   const player = videojs("my-video");
// });
const handleClickMenu = (subItem: Menu.MenuOptions) => {
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  router.push(subItem.path);
};
function login() {
  if (userStore.token) {
  } else {
    router.push("/login");
  }
}
function goBack() {
  window.open("./work", "_blank");
}
const logout = () => {
  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    userStore.setToken("");

    // 3.重定向到登陆页
    // router.replace(LOGIN_URL);
    // 4.刷新页面
    window.location.reload();
    ElMessage.success("退出登录成功！");
  });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
<style>
.el-popper__arrow {
  left: 40px !important;
}
.el-menu-item.is-disabled {
  opacity: 1;
}
</style>
